<template xmlns="">
    <a-card title="案例管理" :bordered="false">
        <template slot="extra">
            <a-form-model layout="inline" @submit.prevent="searchSubmit">

                <a-form-model-item class="width150">
                    <a-input v-model="searchForm.title"
                             :allowClear="$store.getters.allowClear"
                             placeholder="案例名称"></a-input>
                </a-form-model-item>

                <a-form-model-item>
                    <a-button type="primary" html-type="submit">搜索</a-button>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button @click="searchRest">重置</a-button>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button type="danger" @click="openEdit()">新建</a-button>
                </a-form-model-item>
            </a-form-model>
        </template>

        <!-- 表格开始 -->
        <a-list item-layout="horizontal" :data-source="dataSource" :pagination="pagination" :loading="loading">
            <a-list-item slot="renderItem" slot-scope="item, index">
                <a-list-item-meta>
                    <div slot="description">
                        <p class="digest" v-html="item.digest"></p>
                        <p><span class="caseAttr text-info">项目面积:{{item.acreage}}㎡ </span>
                            <span class="caseAttr text-info">完工时期: {{item.period}}</span></p>
                        <p>
                            <span class="caseAttr text-info">项目地点:{{item.address}} </span>

                        </p>

                    </div>


                    <div class="picture" slot="avatar"><img class="pic" :src="item.picture"/></div>

                    <b slot="title">{{ item.title }}</b>


                </a-list-item-meta>

                <template slot="actions">
                    <a @click="openEdit(item)">编辑</a>


                    <a-popconfirm :title="`确定要删除这个案例吗?`" @confirm="() => removeRecord(item)">
                        <a>删除</a>
                    </a-popconfirm>
                </template>

            </a-list-item>
        </a-list>

        <EditBox v-if="editShow" @closeFun="closeEdit" :editRecord="editRecord"/>
    </a-card>
</template>
<script>
    import {
        pagination,

    } from '../public/colums.js';
    import {
        caseList,
        caseDelete
    } from '../public/http.js';

    export default {
        components: {
            EditBox: () => import('./edit.vue')
        },
        data() {
            return {
                actions: [
                    {type: 'star-o', text: '156'},
                    {type: 'like-o', text: '156'},
                    {type: 'message', text: '2'},
                ],


                editShow: false, //打开编辑器
                editRecord: {}, //正在编辑的记录
                dataSource: [],
                pagination: {

                    ...pagination,
                    pageSize: 10,
                    onChange: current => {
                        this.pagination.current = current;
                        this.getTableList();
                    }
                },

                loading: false, //表格loading

                searchForm: {},

            };
        },
        methods: {
            searchRest() {
                this.searchForm = {
                    code: '',
                    name: '',
                    description: '',
                }
                this.getTableList()
            },
            //1.0 获取表格数据
            getTableList() {
                this.loading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
                caseList(this.pagination, searchData).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },
            //1.2翻页监听
            handleTableChange(pagination) {
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.getTableList();
            },
            //2.0打开编辑器
            openEdit(obj = {}) {
                this.editRecord = obj;
                this.editShow = true;
            },
            //2.1 关闭编辑器
            closeEdit(e) {
                this.editShow = false;
                if (e.render) {
                    this.getTableList();
                }
            },
            //3.0 搜索提交
            searchSubmit() {
                this.pagination.current = 1;
                this.getTableList();
            },
            //4.0删除案例
            removeRecord(record) {
                this.loading = true;
                caseDelete(record.id).then(res => {
                    this.$exMod.ajaxMessage(res);
                    if (res.code === 0) {
                        this.getTableList();
                    }
                    this.loading = false;
                });
            },
            //数据初始化
            async init() {

                this.getTableList();
            }
        },
        created() {
            this.init();
        }
    };
</script>


<style lang="scss" scoped>


    .picture {
        width: 200px;
        height: 120px;
        padding: 4px;
        background-color: #EEEEEE;
        box-sizing: border-box;

        display: table-cell;
        vertical-align: middle;

        .pic {
            margin: auto;

            width: 100%;
            max-height: 110px;
            overflow: hidden;
        }
    }

    .digest {
        padding-top: 10px
    }

    .caseAttr {
        padding-right: 10px;
    }

</style>